<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex:1的含义</title>
    <style>
        .container{
            display: flex;
            height: 50px;
        }
        .left{          
            /* 不缩小 */
            flex-shrink: 0;  
            width: 200px;
            height: 100%;
            background-color: skyblue;
        }
        .center{
            flex: 1;
            /* flex-grow: 0;
            flex-shrink: 1;
            flex-basis: auto;  */
            height: 100%;
            /* word-break: break-all; */
            background-color: orange;
        }
        .right{      
            /* 缩小 */
            flex-shrink: 1;
            width: 200px;
            height: 100%;
            background-color: purple;
        }
        .item{
            width: 300px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>        
        <div class="center">Center
            kjskjnfkjsfjkdnskjnkjdnksjnfkjskjskjnfkjsfjkdnskjnkjdnksjnfkjskjskjnfkjsfjkdnskjnkjdnksjnfkjskjskjnfkjsfjkdnskjnkjdnksjnfkjskjskjnfkjsfjkdnskjnkjdnksjnfkjs
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="right">Right</div>
    </div>

    <!-- 
        flex布局下，为了某一个盒子宽度自适应，会给它设置flex：1，其他盒子宽度会设为固定宽度。
        照理说，flex：1 作为占用剩余宽度，应该占用的是其他盒子完整显示后所剩的空间。
        然而 flex：1 其实是以下三个样式属性的缩写，分别是：
            1. flex-grow：代表项目的放大比例
                    * 默认为 0，即使有剩余空间，也不会放大；
                    * 值为 1，表示放大占据剩余空间，如果多个项目设置flex-grow：1，表示等分剩余空间；
                    * 值为 n，表示占据的空间(放大比例)是flex-grow：1 的 n 倍。
            2. flex-shrink：代表项目缩小比例
                    * 默认为 1，即如果空间不足，该项目将缩小；如果多个项目设置为1，则它们缩小比例相同；
                    * 值为 0，如果空间不足，该项目不会缩小；
                    * 值为 n，空间不足时，缩小的比例是flex-shrink：1 的 n 倍。
            3. flex-basis：代表项目的固定宽度
                    * 默认值为 auto，即项目原本的大小；
                    * 设置后项目将占据固定宽度；
     -->

     <!-- 
        flex：1 =  flex-grow：1；
                    flex-shrink：1；
                    flex-basis：auto；
        
        布局上出现过的问题：
            当设置 flex：1 的盒子内容过多，剩余空间不够时，旁边的盒子会缩小自己的空间，
            为了让旁边盒子正常显示，可以给它们设置 flex-shrink：0 就不会缩小。
      -->
</body>
</html>
